<template>
  <div class="home">
    <el-row>
      <el-col :span="12">
        <hy-card
          title="
每月开通会员数量"
        >
          <line-echart v-bind="vipList"></line-echart>
        </hy-card>
      </el-col>
      <el-col :span="12">
        <hy-card title="每月报名次数">
          <line-echart v-bind="appliList"></line-echart>
        </hy-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="7">
        <hy-card
          title="
每月开课数量"
        >
          <pie-echart :pieData="makeList"></pie-echart>
        </hy-card>
      </el-col>
      <el-col :span="7">
        <Hy-card title="每月开通会员数量">
          <rose-echart :roseData="markList"></rose-echart>
        </Hy-card>
      </el-col>

      <el-col :span="10">
        <hy-card title="每月请假次数">
          <bar-echart v-bind="leaveList"></bar-echart>
        </hy-card>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
// import { useStore } from 'vuex'
//自己定义的store里面包含了所有的vuex的功能还包括 一些子模块的数据
import { useStore } from '@/store'
import {
  PieEchart,
  RoseEchart,
  LineEchart,
  BarEchart
} from '@/components/page-echarts/index'
import HyCard from '@/base-ui/card/index'
export default defineComponent({
  name: 'home',
  components: {
    LineEchart,
    HyCard,
    PieEchart,
    RoseEchart,
    BarEchart
  },
  setup() {
    const store = useStore()
    // 获取数据
    store.dispatch('dashboard/getDashboardDataAction')
    //数据处理
    const vipList = computed(() => {
      const xLabels: string[] = []
      const values: any[] = []
      const name = '会员数量'
      const vipList = store.state.dashboard.vipList
      for (const item of vipList) {
        xLabels.push(item.name)
        values.push(item.value)
      }
      return { xLabels, values, name }
    })

    const appliList = computed(() => {
      const xLabels: string[] = []
      const values: any[] = []
      const name = '报名数量'
      const vipList = store.state.dashboard.appliList
      for (const item of vipList) {
        xLabels.push(item.name)
        values.push(item.value)
      }
      return { xLabels, values, name }
    })

    const makeList = computed(() => {
      return store.state.dashboard.makeList.map((item: any) => {
        return { name: item.name, value: item.value }
      })
    })
    const markList = computed(() => {
      return store.state.dashboard.markList.map((item: any) => {
        return { name: item.name, value: item.value }
      })
    })
    const leaveList = computed(() => {
      const xLabels: string[] = []
      const values: any[] = []
      const leaveList = store.state.dashboard.leaveList
      for (const item of leaveList) {
        xLabels.push(item.name)
        values.push(item.value)
      }
      return { xLabels, values }
    })
    return { vipList, appliList, makeList, markList, leaveList }
  }
})
</script>

<style scoped></style>
